<template>
    <div class="abcController">
        <div class="abc-tool">
            <div class="abc-tool-select">
                <el-select
                        v-model="layerIndex"
                        @change="layerChange"
                        placeholder="请选择"
                >
                    <el-option
                            v-for="(item, index) in layers"
                            :key="index"
                            :label="item.name"
                            :value="index"
                    >
                    </el-option>
                </el-select>
            </div>
            <span>透明度</span>
            <el-slider
                    v-model="currentAlpha"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    show-input
                    :show-input-controls="false"
                    :show-tooltip="false"
                    @input="layerAlpha"
            ></el-slider>
            <span>亮度</span>
            <el-slider
                    v-model="currentBrightness"
                    :min="0"
                    :max="5"
                    :step="0.01"
                    show-input
                    :show-input-controls="false"
                    :show-tooltip="false"
                    @input="layerBrightness"
            ></el-slider>
            <span>对比度</span>
            <el-slider
                    v-model="currentContrast"
                    :min="0"
                    :max="5"
                    :step="0.01"
                    show-input
                    :show-input-controls="false"
                    :show-tooltip="false"
                    @input="layerContrast"
            ></el-slider>
            <span>色调</span>
            <el-slider
                    v-model="currentHue"
                    :min="0"
                    :max="180"
                    :step="1"
                    show-input
                    :show-input-controls="false"
                    :show-tooltip="false"
                    @input="layerHue"
            ></el-slider>
            <span>饱和度</span>
            <el-slider
                    v-model="currentSaturation"
                    :min="0"
                    :max="10"
                    :step="0.1"
                    show-input
                    :show-input-controls="false"
                    :show-tooltip="false"
                    @input="layerSaturation"
            ></el-slider>
            <span>伽马</span>
            <el-slider
                    v-model="currentGamma"
                    :min="0"
                    :max="5"
                    :step="0.1"
                    show-input
                    :show-input-controls="false"
                    :show-tooltip="false"
                    @input="layerGamma"
            ></el-slider>
        </div>
    </div>
</template>
<script>
    export default {
        name: "abcController",
        props: {
            visible: {
                type: Boolean,
                default: true
            }
        },
        //import引入的组件需要注入到对象中才能使用",
        components: {},
        data() {
            //这里存放数据",
            return {
                layers: window.viewer.imageryLayers._layers,
                layerIndex: 1,
                currentAlpha: 1,
                currentBrightness: 1,
                currentContrast: 1,
                currentHue:0,
                currentSaturation:1,
                currentGamma:1
            };
        },
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            layerAlpha(val) {
                this.layers[this.layerIndex].alpha = val;
            },
            layerBrightness(val) {
                this.layers[this.layerIndex].brightness = val;
            },
            layerContrast(val) {
                this.layers[this.layerIndex].contrast = val;
            },
            layerHue(val){
                this.layers[this.layerIndex].hue = val;
            },
            layerSaturation(val){
                this.layers[this.layerIndex].saturation = val;
            },
            layerGamma(val){
                this.layers[this.layerIndex].gamma = val;
            },
            layerChange(val) {
                this.currentAlpha = this.layers[val].alpha;
                this.currentBrightness = this.layers[val].brightness;
                this.currentContrast = this.layers[val].contrast;
                this.currentHue=this.layers[val].hue;
                this.currentSaturation= this.layers[val].saturation;
                this.currentGamma= this.layers[val].gamma;
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {},

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {},
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {},

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {},

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {},
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {},
        //生命周期 - 销毁之前",
        beforeDestroy() {},
        destroyed() {},
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {}
    };
</script>

<style scoped>
    .abcController {
       position: relative;
        width: 100%;
    }
    .abc-tool-select{
        margin-bottom: 40px;
    }
    .abcController .abc-tool{
        position: absolute;
        left: 10px;
        top: 10px;
        width: 400px;
        height: 450px;
        padding: 15px;
        color: #fafafa;
        background-color: rgba(175, 175, 175, 0.3);
        z-index: 1000;
        border-radius: 10px;
        text-align: left;
    }
</style>
